<template>
    <div class="div-1">
        <div>
            <el-input v-model="data.name" style="max-width: 260px" placeholder="链接名称">
                <template #prepend>名称</template>
            </el-input>
            <el-select v-model="data.dataType" placeholder="请选择驱动" style="width: 260px">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
            <el-input v-model="data.host" style="max-width: 260px" placeholder="host">
                <template #prepend>地址</template>
            </el-input>
            <el-input v-model="data.port" style="max-width: 260px" placeholder="port">
                <template #prepend>端口</template>
            </el-input>
            <el-input v-model="data.dbname" style="max-width: 260px" placeholder="dbname">
                <template #prepend>库名</template>
            </el-input>
            <el-input v-model="data.user" style="max-width: 260px" placeholder="user">
                <template #prepend>账号</template>
            </el-input>
            <el-input v-model="data.password" style="max-width: 260px" placeholder="password">
                <template #prepend>密码</template>
            </el-input>
            <el-button type="primary" @click="greet" style="width: 125px">
                连接数据库
            </el-button>
            <el-button type="primary" style="width: 125px">
                保存配置
            </el-button>
        </div>

        <div class="dataUrl" v-if="data.result.code == 500">
            <span style="color: red;">
                {{ data.result.msg }}
            </span>
        </div>
        <!-- v-if="data.result.code == 200" -->
        <div >
            <div>

                <el-button type="primary"
                    @click="data.tableTF = true, data.DTF = true, data.ETF = false, data.masterTableTF = false"
                    style="margin-right: 10px;width: 125px">
                    选择数据表
                </el-button>
                <el-button type="primary"
                    @click="data.tableTF = true, data.DTF = true, data.ETF = false, data.masterTableTF = false"
                    style="margin-left:0px;width: 125px">
                    OSS
                </el-button>
                <text style="padding: 5px 12px 6px 12px;background-color:#f5f7fa;border: 1px solid #dcdfe6; color: #909399;
                    font-size: 14px;border-radius: 5px 0 0 5px;border-right-width: 0px;">起始行</text>
                <el-input-number controls-position="right" v-model="data.start" :min="1" :max="30"
                    style="min-width: 192px;border-top-left-radius: 0px;border-bottom-left-radius: 0px;"
                    @change="handleChange"></el-input-number>
                <!-- <el-input v-model="data.path" placeholder="Please input" style="max-width: 600px">
                    <template #prepend>文件地址</template>
                </el-input> -->

                <el-button style="margin: 0 10px;" type="success" round @click="filePath">开始插入信息</el-button>
                <el-button type="primary" @click="file" style="width: 125px;margin-left: 10px">
                    测试导入数据
                </el-button>
            </div>
            <el-row v-if="data.DTF" style="height:360px;margin-top: 10px;">
                <el-col :span="16">
                    <div class="dataUrl" v-if="data.tableTF">
                        <el-transfer v-model="data.value" :data="data.data" style="margin: 0 auto;"
                            :titles="['数据库表', '已选择表']" />
                        <el-button class="dataUrl" type="primary" @click="data.tableTF = !data.tableTF"
                            style="width: 100px;margin: auto;">
                            完成
                        </el-button>
                    </div>
                    <div v-if="data.masterTableTF">
                        <el-table :data="data.fieldInfo" style="height:320px">
                            <el-table-column prop="Field" label="名" />
                            <el-table-column prop="Type" label="类型" />
                            <el-table-column prop="Null" label="不是空" />
                            <el-table-column prop="Comment" label="注释" />
                            <el-table-column label="对应列" min-width="200">
                                <template #default="scope">
                                    <el-input-number v-model="scope.row.Column" :min="1" :max="10"
                                        @change="handleChange" />
                                </template>
                            </el-table-column>
                            <el-table-column label="是否启用" min-width="120">
                                <template #default="scope">
                                    <el-switch v-model="scope.row.Enable" inline-prompt active-text="是"
                                        inactive-text="否" />
                                </template>
                            </el-table-column>
                            <el-table-column label="功能" min-width="120" fixed="right">
                                <template #default="scope">
                                    <el-button link type="primary" size="small"
                                        @click.prevent="deleteRow(scope.$index)">
                                        关联表
                                    </el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                        <el-button class="dataUrl" type="primary" @click="masterField()"
                            style="width: 100px;margin: auto;">
                            完成
                        </el-button>
                    </div>
                </el-col>
                <el-col :span="8">
                    <el-card v-if="data.value.length != 0" style="max-width: 480px ;height: 351px;overflow: auto">
                        <div style="padding: 10px 0;">
                            <span>选择的表:</span>
                        </div>
                        <p v-for="o in data.value" :key="o"
                            style="display: flex;justify-content: space-between;padding: 0 10px;">{{
                                data.data[o]["label"] }}
                            <el-button type="primary" link @click="masterTable(o)" style="margin-left: 10px;"
                                v-if="!data.tableTF">
                                设为主表
                            </el-button>
                        </p>
                    </el-card>
                </el-col>
            </el-row>
            <div>
                {{ data.sql }}
            </div>
        </div>
        <el-drawer v-model="data.fieldInfoDialog" title="" :with-header="false" size="50%" @close="close"
            @closed="close">
            <div style="margin: 10px;">
                表：<el-select v-model="data.relateTable" placeholder="Select" style="margin-left: 10px;width: 240px"
                    @change="handleRelateTable">
                    <el-option v-for="(item, index) in data.data" :key="index" :label="item.label" :value="index" />
                </el-select>
            </div>
            <div style="margin: 10px;">
                键：<el-select v-model="data.relateKey" placeholder="Select" style="margin-left: 10px;width: 240px"
                    @change="handleRelateKey">
                    <el-option v-for="item in data.children" :key="item.value" :label="item.label"
                        :value="item.value" />
                </el-select>
            </div>
            <div style="margin: 10px;">
                值：<el-select v-model="data.relateValue" placeholder="Select" style="margin-left: 10px;width: 240px"
                    @change="handleRelateValue">
                    <el-option v-for="item in data.children" :key="item.value" :label="item.label"
                        :value="item.value" />
                </el-select>
            </div>
            <el-button class="dataUrl" type="primary" @click="masterRelate" style="width: 100px;margin: auto;">
                完成
            </el-button>
        </el-drawer>
    </div>
</template>
<script setup>
import { reactive } from 'vue'
import { TestData, FileHandler, FileHandler2 } from '../../wailsjs/go/main/App'
import { ElMessage } from 'element-plus'
import { ElLoading } from 'element-plus'
const data = reactive({
    // 数据库连接信息
    user: "root",
    password: "",
    host: "127.0.0.1",
    port: "",
    dbname: "",
    // 数据库驱动
    dataType: "",
    // 数据库连接字符串
    dataUrl: "MFP:MFP@(127.0.0.1:3306)/mfp?charset=utf8mb4&parseTime=True&loc=Local",
    // 数据库连接结果
    result: {},
    value: [],
    data: [],
    tableTF: false,
    table: "",
    sql: "",
    masterTableTF: false,
    ETF: true,
    DTF: false,
    fieldInfo: [],
    fieldInfoIndex: 0,
    fieldInfoDialog: false,
    selectField: [],
    table: "",
    children: [],
    relateTable: "",
    relateIndex: 0,
    relateKey: "",
    relateValue: "",
    imageUrl: "",
    upload: null,
    path: "",
    start: 1,
})

function greet() {

    if (data.dataType == "mysql") {
        data.dataUrl = data.user + ":" + data.password + "@(" + data.host + ":" + data.port + ")/" + data.dbname + "?charset=utf8mb4&parseTime=True&loc=Local"
    } else if (data.dataType == "postgres") {
        data.dataUrl = "user=" + data.user + " password=" + data.password + " host=" + data.host + " port=" + data.port + " dbname=" + data.dbname + " sslmode=disable"
    }

    TestData(data).then(result => {
        console.log(result)
        data.result = result
        data.data = result.data
        if (result.code == 200) {
            ElMessage({
                showClose: true,
                message: result.msg,
                type: 'success',
            })
        } else {
            ElMessage({
                showClose: true,
                message: result.msg,
                type: 'error',
            })
        }
    }).catch(err => {
        console.log(err)
        // loading.close()
    }).finally(() => {
        // loading.close()
    })
}
function masterTable(e) {
    data.table = data.data[e]["table"]
    data.masterTableTF = true;
    data.fieldInfo = data.data[e]["fieldInfo"]
}

function masterField() {
    data.sql = ""
    for (let i = 0; i < data.fieldInfo.length; i++) {
        if (data.fieldInfo[i].Enable) {
            if (data.fieldInfo[i].Column == null || data.fieldInfo[i].Column == undefined || data.fieldInfo[i].Column == "") {
                ElMessage.error('对应列不能为空')
                return
            }
            var v = ""
            if (data.fieldInfo[i].relateKey != null) {
                v = "[Table=" + data.fieldInfo[i].relateTable + ",Key=" + data.fieldInfo[i].relateKey +
                    ",Value=" + data.fieldInfo[i].relateValue + ",Column=" + data.fieldInfo[i].Column + "]"
            }
            if (data.sql != "") {
                data.sql = data.sql + "," + data.fieldInfo[i]["Field"] + v

            } else {
                data.sql = data.fieldInfo[i]["Field"] + v
            }
        }
    }
    if (data.sql != "") {
        data.sql = "insert into " + data.table + " (" + data.sql + ")"
    } else {
        ElMessage.error('请选择字段')
    }

}

function deleteRow(index) {
    data.fieldInfoIndex = index;
    if (data.fieldInfo[data.fieldInfoIndex].relateTable != "") {
        data.relateTable = data.fieldInfo[data.fieldInfoIndex].relateTable
        data.relateKey = data.fieldInfo[data.fieldInfoIndex].relateKey
        data.relateValue = data.fieldInfo[data.fieldInfoIndex].relateValue
    }
    data.fieldInfoDialog = true;
}

function handleRelateTable(value) {
    data.relateIndex = value
    data.relateTable = data.data[value]["table"]
    data.children = data.data[value].fieldInfo
    data.relateKey = ""
    data.relateValue = ""
}

function masterRelate() {
    data.fieldInfo[data.fieldInfoIndex].relateTable = data.relateTable
    data.fieldInfo[data.fieldInfoIndex].relateKey = data.relateKey
    data.fieldInfo[data.fieldInfoIndex].relateValue = data.relateValue
    console.log(data.fieldInfo)
    close()
}

function close() {
    data.relateTable = "";
    data.relateKey = "";
    data.relateValue = "";
    data.fieldInfoDialog = false;
}

function handleRelateKey(value) {
    data.fieldInfo[data.fieldInfoIndex].relateKey = value
}

function handleRelateValue(value) {
    data.fieldInfo[data.fieldInfoIndex].relateValue = value
}

function filePath() {
    if (data.path != "") {

        var fieldInfoData = []
        for (let i = 0; i < data.fieldInfo.length; i++) {
            if (data.fieldInfo[i].Enable) {
                fieldInfoData.push(data.fieldInfo[i])
            }
        }
        FileHandler(data.table, data.path, fieldInfoData, data.start).then(result => {
            ElMessage.info(result["data"] + result["msg"])
        }).catch(err => {
            console.log(err)
        })
    } else {
        ElMessage.error('文件地址不能为空')
    }
}

const options = [{
    value: 'mysql',
    label: 'MySql',
}, {
    value: 'postgres',
    label: 'PostgreSQL',
}]
function ai(index) {
    console.log(index)
    // data.activeIndex = index
}
function file() {
    FileHandler("D:\\Users\\Desktop\\新建 XLS 工作表")
}
</script>

<style scoped>
.div-1 {
    /* width: 100%; */
    text-align: left;
    padding: 20px;
    display: flex;
    flex-direction: column;
}

.dataUrl {

    margin-top: 10PX;
    display: flex;
    flex-direction: column;
}

.dataUrl-input {
    min-width: 240px;
    margin: 10px 0;
}
</style>
